/*
  学习目标：Route组件的使用说明
*/

import React from 'react';

import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';
import './base.css';
export default class App extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <h1>app组件</h1>

          <NavLink activeClassName="xxx" to="/home">
            调到Home
          </NavLink>
          <br />
          <NavLink exact to="/my">
            调到我的音乐
          </NavLink>
          <br />
          <NavLink to="/friend">调到朋友</NavLink>

          {/* 💥Route是规则对象和挂载点二合一, 匹配时, 渲染组件, 不匹配时,原地返回一个null */}
          {/* 💥Route默认是模糊匹配, exact开启精准匹配, 类似Link组件 */}

          {/* 💥Route组件默认从上向下, 一次匹配, 默认不会停止 */}
          <Route path="/home" component={Home} />
          <Route path="/home" component={Home} />
          <Route path="/home" component={Home} />
          <Route path="/home" component={Home} />
          <Route path="/my" component={MyMusic} />
          <Route path="/friend" component={Friend} />
          {/* 💥表示匹配任意路径的两种方式:
              1. 不写path, 等价于vue中*
              2. path="/", 可以跟任意路径, 模糊匹配
          */}
          <Route exact path="/" component={Friend} />
          <Route
            // 不写path时, exact无效
            // exact
            component={Friend}
          />
        </div>
      </Router>
    );
  }
}

function Home() {
  return <h1>我是首页组件</h1>;
}

function MyMusic() {
  return <h1>我是我的音乐件</h1>;
}

function Friend() {
  return <h1>我是朋友组件</h1>;
}
